<template>
  <view class="card">
    <view class="card-cover">
      <view @click="onGoDetail" :class="isFileType(data.video.address) === 'video' && data.lesson ? 'card-cover-video' : 'card-cover-image'">
        <uv-image
          :src="
            isFileType(data.video.address) === 'image'
              ? data.video.address
              : data.video.cover || defaultImagesList[$uv.random(0, defaultImagesList.length - 1)]
          "
          height="100%"
          width="100%"
        ></uv-image>
        <view class="popup"></view>
      </view>
      <view class="card-cover-shoucang">
        <image
          :src="'../../static/img/shoucang-click.png'"
          style="width: 100%; height: 100%"
          mode="aspectFill"
        />
      </view>
      <view class="card-cover-progress" v-if="Number(data.lesson.personage) !== 1" @click="showDialog">
        <image :src="defaultProgressImgs[data.lesson.grade - 1]" style="width: 100%; height: 100%" mode="aspectFill" />
      </view>
    </view>
    <view class="card-image" v-if="Number(data.lesson?.personage) === 1 || data.classify === 'Video'">
      <text class="name" v-if="data.lesson?.name">{{ data.lesson?.name }}</text>
      <text class="name" v-if="data.title && data.classify === 'Video'">{{ data.title }}</text>
      <text class="username">{{ data.lesson?.teacher?.username || '无' }}</text>
      <view class="image" @click="onGoTeacher">
        <uv-avatar :src="data.lesson?.teacher?.profilePhoto || defaultImages[2]" size="85rpx" mode="aspectFill"></uv-avatar>
      </view>
    </view>
    <view class="card-image" v-else-if="data.classify === 'OnlineLesson'">
      <text class="name" v-if="data.lesson?.name">{{ data.lesson?.name }}</text>
      <text class="name" v-if="data.title && data.classify === 'Video'">{{ data.title }}</text>
      <text class="username">{{ data.lesson?.teacher?.username || '无' }}</text>
      <view class="image">
        <uv-avatar :src="data.lesson?.teacher?.profilePhoto || defaultImages[2]" size="85rpx" mode="aspectFill"></uv-avatar>
      </view>
    </view>

    <view class="card-video" v-else @click="onGoDetail">
      <view class="popup">
        <text class="week">{{ data.week || '无数据' }}</text>
        <text class="lesson">{{ data.lesson?.name }}</text>
        <text class="merchant" v-if="data.lesson?.merchant && data.lesson?.merchant.id">
          {{ data.lesson?.merchant?.headquater.name }}
          <template v-if="data.lesson?.merchant?.name">({{ data.lesson?.merchant?.name }})</template>
        </text>
        <text class="merchant" v-else>无地址</text>
      </view>
    </view>
  </view>
  <f-dialog-card v-model="dialog" v-if="dialog"></f-dialog-card>
</template>

<script setup>
  import { defaultImages, defaultImagesList, defaultProgressImgs } from '@/common/js/global.js';
  import { ref, reactive, toRefs } from 'vue';
  import { isFileType, getPercentage } from '@/common/js/fn.js';
  const props = defineProps({
    data: {
      type: Object,
      default: () => ({})
    }
  });
  const { data } = toRefs(props);

  const showErrImg = ref(true);
  const dialog = ref(false);

  const getWeek = time => {
    const date = new Date(time);
    const dateArr = new Array('周日', '周一', '周二', '周三', '周四', '周五', '周六');
    const week = date.getDay(); // 0 表示周日，1 到 6 表示周一到周六
    return dateArr[week];
  };

  const onGoPreview = () => {
    uni.$uv.route({
      url: '/pages/main/coursePreview',
      params: {
        id: data.value.id
      }
    });
  };

  const onGoDetail = () => {
    if (data.value.classify === 'OnlineLesson') {
      uni.$uv.route({
        url: '/pages/online/index',
        params: {
          id: data.value.id
        }
      });
      return;
    }
    uni.$uv.route({
      url: '/pages/main/course',
      params: {
        id: data.value.id
      }
    });
  };

  const onGoTeacher = () => {
    uni.$uv.route({
      url: '/pages/me/share',
      params: {
        id: data.value.teacherID
      }
    });
  };

  const showDialog = () => {
    dialog.value = true;
  };
</script>

<style lang="scss" scoped>
  .card {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 551rpx;
    font-size: 24rpx;
    &-cover {
      position: relative;
      // margin-bottom: 12rpx;
      width: 100%;
      &-video {
        border-radius: 17rpx;
        overflow: hidden;
        height: 100%;
        width: 100%;
      }
      &-image {
        border-radius: 17rpx;
        overflow: hidden;
        width: 100%;
        height: 485rpx;
        position: relative;
        .popup {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 331rpx;
          border-bottom-right-radius: 17rpx;
          border-bottom-left-radius: 17rpx;
          background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
        }
      }
      &-shoucang {
        position: absolute;
        right: 16rpx;
        top: 26rpx;
        width: 45rpx;
        height: 45rpx;
      }

      &-progress {
        position: absolute;
        top: -14rpx;
        left: -30rpx;
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
      }
    }
    &-video {
      width: 100%;
      position: absolute;
      bottom: 0;

      .popup {
        width: 100%;
        // height: 163rpx;
        height: 331rpx;
        border-bottom-right-radius: 17rpx;
        border-bottom-left-radius: 17rpx;
        overflow: hidden;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
      }

      // .popup:after {
      //   width: 120%;
      //   height: 100%;
      //   position: absolute;
      //   left: -10%;
      //   top: 0;
      //   content: '';
      //   border-radius: 50% 50% 0 0;
      //   background: rgba(0, 0, 0, 0.5);
      //   opacity: 1;
      // }

      .week {
        display: block;
        font-size: 28rpx;
        font-weight: 700;
        z-index: 2004;
        margin-bottom: 6rpx;
        text-shadow: 0px 2rpx 7rpx rgba(0, 0, 0, 0.5);
      }
      .lesson {
        text-shadow: 0px 2rpx 7rpx rgba(0, 0, 0, 0.5);
        margin-bottom: 6rpx;
        font-size: 28rpx;
        z-index: 2004;
      }
      .merchant {
        text-shadow: 0px 2rpx 7rpx rgba(0, 0, 0, 0.5);
        margin-bottom: 12rpx;
        font-size: 24rpx;
        z-index: 2004;
      }
    }
    &-image {
      font-size: 24rpx;
      .name {
        position: absolute;
        left: 13rpx;
        bottom: 80rpx;
        background-color: #1d1f24;
        padding: 9rpx 24rpx;
        border-radius: 24rpx;
        color: #fff;
      }
      .username {
        position: absolute;
        right: 98rpx;
        bottom: 14rpx;
      }
      .image {
        position: absolute;
        right: -9rpx;
        bottom: 9rpx;
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        background-color: #1d1f24;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
</style>
